<template>
  	<div class="header">
		<b-container>
			<b-row>
				<b-navbar toggleable="lg" type="dark">
					<b-navbar-brand @click="goHref('home')">
						<img src="./images/logo.png" alt="DLB">
					</b-navbar-brand>
					<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
					<b-collapse id="nav-collapse" is-nav>
						<b-navbar-nav class="ml-auto" id="menu">
							<b-nav-item @click="goHref('home')" :class="{'active':routeName=='home'}">{{$t('header.home')}}</b-nav-item>
							<b-nav-item @click="goHref('news')" :class="{'active':routeName=='news'}">{{$t('header.news')}}</b-nav-item>
							<b-nav-item href="http://scan.dlb.com" target="_blank">{{$t('header.DLBScan')}}</b-nav-item>
							<b-nav-item @click="goHref('wallet')" :class="{'active':routeName=='wallet'}">{{$t('header.DLBWallet')}}</b-nav-item>
							<b-nav-item-dropdown>
								<template slot="button-content">{{$t('header.application')}}</template>
								<b-dropdown-item href="http://www.readbox.vip/" target="_blank">{{$t('header.ReaderBox')}}</b-dropdown-item>
							</b-nav-item-dropdown>
							<b-nav-item-dropdown :text="$t('header.language')">
								<b-dropdown-item v-for="(item,index) in $t('header.lanList')" :key="index" @click.native="changeL(item.type)">{{item.name}}</b-dropdown-item>
							</b-nav-item-dropdown>
						</b-navbar-nav>
					</b-collapse>
				</b-navbar>
			</b-row>
		</b-container>
  	</div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	name: 'Header',
	data () {
		return {
			bg: false,
			routeName: 'home'
		}
	},
	mounted(){
		this.routeName = this.$route.name
	},
	watch:{
		'$route.name'(n){
			this.routeName = n
		}
	},
	methods:{
		...mapActions(['changeLang']),
		changeL(lan){
			// console.log(lan)
			this.changeLang(lan);
			this.$i18n.locale = lan;
			window.i18nLocale = lan;
		},
		goHref(href){
			this.$router.push(`/${href}`)
		}
	}
}
</script>

<style lang="scss" scoped>
.header{
	font-size:16px;
	position: fixed;
	top:0;
	left:0;
	right:0;
	z-index: 999;
	&.fixed-header-on{
		background: rgba(0,0,0,.5);
	}
	&.bg{
		background: #061a39;
	}
}
</style>
